<template>
  <div id="kpi">
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">质量KPI看板</el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>

    <el-row style="position: relative;">
        <el-col :xs="24" :sm="24" :lg="24">
          <v-choose dateType="monthrange"></v-choose>
        </el-col>

        <div class="kpiPageBtn">
          <el-button type="primary" @click="toKpiPage">数据录入</el-button>
          <el-button type="success" @click="toKpiConfig">看板配置</el-button>
        </div>
    </el-row>

    <div v-if="chooseList.radio == 1" class="summary-tag marT">
      <el-row class="bgColor">
        <el-col :xs="24" :sm="24" :lg="24">
          <div class="ibox-title pad">KPI数据展示</div>

          <div class="table mar">
            <el-table
              :border="true"
              :data="kpilableTable"
              :header-cell-style="{background:'#eef1f6'}"
              style="width: 100%">
              <el-table-column
                align="center"
                width="150"
                label="事业群"
                >
                <template slot-scope="scope">
                  <div class="pro_name" @click="kpiClick(scope.row.group_id, 'ab_project', 'period',true)">
                    {{scope.row.name}}
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                label="阶段点评审流程"
                >
                <template slot-scope="scope">
                  <div class="wrapper marb" @click="kpiClick(scope.row.group_id, 'ab_project', 'period',true)">
                    <div class="wrapper-item">AB类项目</div>
                    <div class="card-content">
                      <div class="left">项目{{ scope.row.ab_period_project_count }}(个)</div>
                      <el-button class="right" style="padding: 5px" type="primary">覆盖率{{ getPercent(scope.row.ab_period_cover_rate) }}</el-button>
                    </div>
                  </div>

                  <div class="wrapper" @click="kpiClick(scope.row.group_id, 'project', 'period',false)">
                    <div class="wrapper-item">所有项目</div>
                    <div class="card-content">
                      <div class="left">项目{{ scope.row.period_project_count }}(个)</div>
                      <el-button class="right" style="padding: 5px" type="primary">覆盖率{{ getPercent(scope.row.period_cover_rate) }}</el-button>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                label="客户投诉处理流程"
                >
                <template slot-scope="scope">
                  <!-- <div class="wrapper marb" @click="kpiClick(scope.row.group_id, 'ab_project', 'complaint')">
                    <div class="wrapper-item">AB类项目</div>
                    <div class="card-content" style="color: #f56c6c">
                      <div class="left">投诉{{ scope.row.ab_complaint_project_count }}(个)</div>
                      <el-button class="right" style="padding: 5px" type="danger">覆盖率{{ getPercent(scope.row.ab_complaint_cover_rate) }}</el-button>
                    </div>
                  </div> -->
                  <div class="wrapper" @click="kpiClick(scope.row.group_id, 'project', 'complaint',false)">
                    <div class="wrapper-item">所有项目</div>
                    <div class="card-content" style="color: #f56c6c">
                      <div class="left">投诉{{ scope.row.complaint_project_count }}(个)</div>
                      <el-button class="right" style="padding: 5px" type="danger">覆盖率{{ getPercent(scope.row.complaint_cover_rate) }}</el-button>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                label="Bug处理流程"
                >
                <template slot-scope="scope">
                  <div class="wrapper marb" @click="kpiClick(scope.row.group_id, 'ab_project', 'bug',true)">
                    <div class="wrapper-item">AB类项目</div>
                    <div class="card-content">
                      <div class="left">项目{{ scope.row.ab_bug_project_count }}(个)</div>
                      <el-button class="right" style="padding: 5px" type="primary">覆盖率{{ getPercent(scope.row.ab_bug_cover_rate) }}</el-button>
                    </div>
                  </div>
                  <div class="wrapper" @click="kpiClick(scope.row.group_id, 'project', 'bug',false)">
                    <div class="wrapper-item">所有项目</div>
                    <div class="card-content">
                      <div class="left">项目{{ scope.row.bug_project_count }}(个)</div>
                      <el-button class="right" style="padding: 5px" type="primary">覆盖率{{ getPercent(scope.row.bug_cover_rate) }}</el-button>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                label="版本Release流程"
                >
                <template slot-scope="scope">
                  <div class="wrapper marb" @click="kpiClick(scope.row.group_id, 'ab_project', 'release', true)">
                    <div class="wrapper-item">AB类项目</div>
                    <div class="card-content">
                      <div class="left">项目{{ scope.row.ab_release_project_count }}(个)</div>
                      <el-button class="right" style="padding: 5px" type="primary">覆盖率{{ getPercent(scope.row.ab_release_cover_rate) }}</el-button>
                    </div>
                  </div>
                  <div class="wrapper" @click="kpiClick(scope.row.group_id, 'project', 'release', false)">
                    <div class="wrapper-item">所有项目</div>
                    <div class="card-content">
                      <div class="left">项目{{ scope.row.release_project_count }}(个)</div>
                      <el-button class="right" style="padding: 5px" type="primary">覆盖率{{ getPercent(scope.row.release_cover_rate) }}</el-button>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>

      <div class="line-box marT">
        <el-card class="box-card m-b" shadow="never">
          <div slot="header" class="clearfix" style="vertical-align:middle;">
            <div style="float: left; padding: 10px 0"></div>
            <el-radio-group @change="changed" v-model="selected" style="padding: 3px 0" size="mini">
                <el-radio-button label="AB类项目总数"></el-radio-button>
                <el-radio-button label="AB类项目覆盖率"></el-radio-button>
                <el-radio-button label="所有项目总数"></el-radio-button>
                <el-radio-button label="所有项目覆盖率"></el-radio-button>
            </el-radio-group>
            <div v-if="selected == 'AB类项目总数'">
              <el-row :gutter="30">
                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="阶段点评审流程"
                    type="line"
                    :data="periodLineData"
                    :settings="settings"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="客户投诉处理流程"
                    type="line"
                    :data="complaintLineData"
                    :settings="settings"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>
              </el-row>

              <el-row :gutter="30" class="marT">
                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="Bug处理流程"
                    type="line"
                    :data="bugLineData"
                    :settings="settings"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="版本Release流程"
                    type="line"
                    :data="releaseLineData"
                    :settings="settings"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>
              </el-row>
            </div>

            <div v-else-if="selected == 'AB类项目覆盖率'">
              <el-row :gutter="30">
                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="阶段点评审流程"
                    type="line"
                    :data="periodLineData"
                    :settings="settings2"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="客户投诉处理流程"
                    type="line"
                    :data="complaintLineData"
                    :settings="settings2"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>
              </el-row>

              <el-row :gutter="30" class="marT">
                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="Bug处理流程"
                    type="line"
                    :data="bugLineData"
                    :settings="settings2"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="版本Release流程"
                    type="line"
                    :data="releaseLineData"
                    :settings="settings2"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>
              </el-row>
            </div>

            <div v-else-if="selected == '所有项目总数'">
              <el-row :gutter="30">
                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="阶段点评审流程"
                    type="line"
                    :data="periodLineData"
                    :settings="settings"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="客户投诉处理流程"
                    type="line"
                    :data="complaintLineData"
                    :settings="settings"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>
              </el-row>

              <el-row :gutter="30" class="marT">
                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="Bug处理流程"
                    type="line"
                    :data="bugLineData"
                    :settings="settings"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="版本Release流程"
                    type="line"
                    :data="releaseLineData"
                    :settings="settings"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>
              </el-row>
            </div>

            <div v-else>
              <el-row :gutter="30">
                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="阶段点评审流程"
                    type="line"
                    :data="periodLineData"
                    :settings="settings2"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="客户投诉处理流程"
                    type="line"
                    :data="complaintLineData"
                    :settings="settings2"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>
              </el-row>

              <el-row :gutter="30" class="marT">
                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="Bug处理流程"
                    type="line"
                    :data="bugLineData"
                    :settings="settings2"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="12">
                  <v-charts
                    headerTitle="版本Release流程"
                    type="line"
                    :data="releaseLineData"
                    :settings="settings2"
                    :dataZoom="dataZoom"
                    :data-empty="periodLineEmpty"
                    :loading="periodLineLoading">
                  </v-charts>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>

      </div>
    </div>

    <template v-else>
      <el-row class="marT">
        <el-col :xs="24" :sm="24" :lg="24" ref="point">
          <v-charts
            headerTitle="评分趋势"
            type="line"
            :data="ponitData"
            :data-zoom="dataZoom"
            :settings="settings"
            :data-empty="pointEmpty"
            :loading="pointLoading"></v-charts>
        </el-col>
      </el-row>

      <div class="marT pointTable bgColor">
        <div class="ibox-title pad">评分列表</div>
        <el-row style="padding: 20px">
            <el-col :xs="24" :sm="24" :lg="24">
                <el-table
                    :header-cell-style="{background:'#eef1f6'}"
                    v-loading="pointLoading"
                    :data="pointTable.slice((pointCurrent-1)*pointSize, pointCurrent*pointSize)"
                    style="width: 100%">
                      <el-table-column
                        fixed
                        label="月度统计"
                        align="center"
                        prop="examine_month"
                        width="80">
                      </el-table-column>

                      <el-table-column
                        label="客户满意度管理-客户投诉"
                        align="center"
                        prop="customer_mark">

                        <el-table-column
                          label="流程覆盖率"
                          align="center"
                          prop="complaint_flow_cover_rate"
                          :formatter="point">
                        </el-table-column>
                        <el-table-column
                          label="流程符合度"
                          align="center"
                          prop="complaint_flow_conformity"
                          :formatter="point">
                        </el-table-column>
                        <el-table-column
                          label="客户投诉纠正预防措施关闭率"
                          align="center"
                          prop="complaint_rectify_closed_rate"
                          :formatter="point">
                        </el-table-column>
                      </el-table-column>

                      <el-table-column
                        label="阶段点质量评审"
                        align="center"
                        prop="period_mark">
                        <el-table-column
                          label="AB类项目流程覆盖率"
                          align="center"
                          prop="period_flow_cover_rate"
                          :formatter="point">
                        </el-table-column>

                        <el-table-column
                          label="流程符合度"
                          align="center"
                          prop="period_flow_conformity"
                          :formatter="point">
                        </el-table-column>

                        <el-table-column
                          label="评审计划偏差率"
                          align="center"
                          prop="period_plan_deviation_rate"
                          :formatter="point">
                        </el-table-column>

                        <el-table-column
                          label="评审一次通过率"
                          align="center"
                          prop="period_review_pass_rate"
                          :formatter="point">
                        </el-table-column>

                        <el-table-column
                          label="评审发现问题关闭率"
                          align="center"
                          prop="period_issue_closed_rate"
                          :formatter="point">
                        </el-table-column>
                      </el-table-column>

                      <el-table-column
                        v-if="!groupStatus"
                        label="bug处理"
                        align="center"
                        prop="bug_mark">
                        <el-table-column
                          label="AB类项目流程覆盖率"
                          align="center"
                          prop="bug_flow_cover_rate"
                          :formatter="point">
                        </el-table-column>

                        <el-table-column
                          label="流程符合度"
                          align="center"
                          prop="bug_flow_conformity"
                          :formatter="point">
                        </el-table-column>

                        <el-table-column
                          label="无效Bug比例"
                          align="center"
                          prop="invalid_bug_rate"
                          :formatter="point">
                        </el-table-column>
                      </el-table-column>

                      <el-table-column v-else align="center" label="bug处理">
                        <el-table-column
                          label="Bug处理流程符合度"
                          align="center"
                          :formatter="point"
                          prop="bug_flow_conformity_for_customer">
                        </el-table-column>

                        <el-table-column
                          label="无效Bug比例"
                          align="center"
                          :formatter="point"
                          prop="bug_comments_for_customer">
                        </el-table-column>
                      </el-table-column>

                      <el-table-column
                        label="发布流程"
                        align="center"
                        prop="release_mark">
                        <el-table-column
                          label="流程覆盖率"
                          align="center"
                          prop="release_flow_cover_rate"
                          :formatter="point">
                        </el-table-column>

                        <el-table-column
                          v-if="!groupStatus"
                          label="流程符合度"
                          align="center"
                          prop="release_flow_conformity"
                          :formatter="point">
                        </el-table-column>

                        <el-table-column
                          v-else
                          label="Release流程符合度"
                          align="center"
                          prop="release_flow_conformity_for_customer"
                          :formatter="point">
                        </el-table-column>
                      </el-table-column>

                      <el-table-column align="center" label="加减分项">
                        <el-table-column key="change" align="center" label="项目人员替换率">
                          <el-table-column
                            v-if="targetList.labor_replacement_ratio"
                            align="center"
                            :label="operatorList[targetList.labor_replacement_ratio.operator]+targetList.labor_replacement_ratio.indicator+'%'"
                            :formatter="point"
                            prop="labor_replacement_ratio">
                          </el-table-column>
                        </el-table-column>

                        <el-table-column key="complaint" label="客户投诉次数(次)" align="center">
                          <el-table-column
                            v-if="targetList.complaint_count"
                            :label="operatorList[targetList.complaint_count.operator]+targetList.complaint_count.indicator+'次'"
                            align="center"
                            prop="complaint_count"
                            :formatter="point"
                            >
                          </el-table-column>
                        </el-table-column>

                        <el-table-column key="reason" label="因评审原因导致客户投诉次数(次)" align="center">
                          <el-table-column
                            v-if="targetList.period_by_complaint_count"
                            :label="operatorList[targetList.period_by_complaint_count.operator]+targetList.period_by_complaint_count.indicator+'次' || ''"
                            align="center"
                            :formatter="point"
                            prop="period_by_complaint_count">
                          </el-table-column>
                        </el-table-column>

                        <el-table-column label="Bug comments填写规范度" align="center">
                          <el-table-column
                            v-if="targetList.bug_comments"
                            :label="operatorList[targetList.bug_comments.operator]+targetList.bug_comments.indicator+'%'"
                            align="center"
                            :formatter="point"
                            prop="bug_comments">
                          </el-table-column>
                        </el-table-column>

                        <el-table-column label="Bug超期率" align="center">
                          <el-table-column
                            v-if="targetList.bug_overtime_rate"
                            :label="operatorList[targetList.bug_overtime_rate.operator]+targetList.bug_overtime_rate.indicator+'%'"
                            align="center"
                            :formatter="point"
                            prop="bug_overtime_rate">
                          </el-table-column>
                        </el-table-column>

                        <el-table-column label="bug degrade率" align="center">
                          <el-table-column
                            v-if="targetList.bug_degrade_rate"
                            :label="operatorList[targetList.bug_degrade_rate.operator]+targetList.bug_degrade_rate.indicator+'%'"
                            align="center"
                            prop="bug_degrade_rate"
                            :formatter="point"
                            >
                          </el-table-column>
                        </el-table-column>

                        <el-table-column label="bug reopen率" align="center">
                          <el-table-column
                            v-if="targetList.bug_reopen_rate"
                            :label="operatorList[targetList.bug_reopen_rate.operator]+targetList.bug_reopen_rate.indicator+'%'"
                            align="center"
                            prop="bug_reopen_rate"
                            :formatter="point"
                            >
                          </el-table-column>
                        </el-table-column>

                        <el-table-column label="bug逃逸率" align="center">
                          <el-table-column
                            v-if="targetList.bug_escape_rate"
                            :label="operatorList[targetList.bug_escape_rate.operator]+targetList.bug_escape_rate.indicator+'%'"
                            align="center"
                            prop="bug_escape_rate"
                            :formatter="point"
                            >
                          </el-table-column>
                        </el-table-column>

                        <!-- <el-table-column label="bug逃逸率" align="center">
                          <el-table-column
                            label=">=10%"
                            align="center"
                            prop="bug_escape_rate"
                            :formatter="point"
                            >
                          </el-table-column>
                        </el-table-column> -->

                        <el-table-column label="无效版本比例" align="center">
                          <el-table-column
                            v-if="targetList.invalid_version_rate"
                            :label="operatorList[targetList.invalid_version_rate.operator]+targetList.invalid_version_rate.indicator+'%'"
                            align="center"
                            prop="invalid_version_rate"
                            :formatter="point"
                            >
                          </el-table-column>
                        </el-table-column>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        label="基础流程得分"
                        :formatter="point"
                        prop="basic_flow_score">
                      </el-table-column>
                      <el-table-column
                        align="center"
                        label="持续改进积分达标"
                        :formatter="point"
                        prop="improve_score">
                      </el-table-column>
                      <el-table-column
                        align="center"
                        label="总分"
                        :formatter="point"
                        prop="total_mark">
                      </el-table-column>
                </el-table>
                <el-pagination class="marT"
                    v-show="pointTotal > 10"
                    :page-size="pointSize"
                    background
                    @size-change="pointSizeChange"
                    @current-change="pointCurrentChange"
                    :current-page="pointCurrent"
                    layout="prev, pager, next"
                    style="text-align: center"
                    :total="pointTotal">
                  </el-pagination>
            </el-col>
        </el-row>
      </div>

      <el-row class="marT">
        <el-col :xs="24" :sm="24" :lg="24">
          <el-tabs v-model="activeName" ref="eTab" type="border-card">
            <el-tab-pane label="阶段点评审指标" name="1">
              <ve-line
                ref="line1"
                :data="periodData"
                :settings="settings"
                :data-empty="periodDataEmpty"
                :loading="periodLoading"
                :data-zoom="dataZoom"></ve-line>
            </el-tab-pane>
            <el-tab-pane label="客户投诉指标" name="2">
              <ve-line
                ref="line2"
                :data="complaintData"
                :settings="settings"
                :data-empty="periodDataEmpty"
                :loading="periodLoading"
                :data-zoom="dataZoom"></ve-line>
            </el-tab-pane>
            <el-tab-pane label="缺陷处理指标" name="3">
              <ve-line
                ref="line3"
                :data="defectData"
                :settings="settings"
                :data-empty="periodDataEmpty"
                :loading="periodLoading"
                :data-zoom="dataZoom"></ve-line>
            </el-tab-pane>
            <el-tab-pane label="版本Release指标" name="4">
              <ve-line
                ref="line4"
                :data="releaseData"
                :settings="settings"
                :data-empty="periodDataEmpty"
                :loading="periodLoading"
                :data-zoom="dataZoom"></ve-line>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>

      <div id="cursor" class="dataTable marT bgColor">
        <div class="ibox-title pad">KPI列表</div>
          <el-row style="padding: 20px">
              <el-col :xs="24" :sm="24" :lg="24">
                  <el-table
                      :header-cell-style="{background:'#eef1f6'}"
                      v-loading="tableLoading"
                      :data="tableData.slice((tableCurrent-1)*tableSize, tableCurrent*tableSize)"
                      style="width: 100%">
                      <el-table-column
                        fixed
                        label="月度统计"
                        align="center"
                        prop="examine_month"
                        width="100">
                         <template slot-scope="scope">
                           <div v-if="scope.row.examine_month" @click="kpiListClick(scope.row.examine_month)">{{scope.row.examine_month}}</div>
                         </template>
                      </el-table-column>

                      <el-table-column align="center" label="客户满意度管理-客户投诉">
                        <el-table-column
                          label="客户流程覆盖率"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.complaint_flow_cover_rate" :class="{'noReach': !scope.row.complaint_flow_cover_rate.is_reached, 'reach': scope.row.complaint_flow_cover_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'complaint_flow_cover_rate')">{{cellFilter(scope.row.complaint_flow_cover_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>

                        <el-table-column
                          label="客户流程符合度"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.complaint_flow_conformity" :class="{'noReach': !scope.row.complaint_flow_conformity.is_reached, 'reach': scope.row.complaint_flow_conformity.is_reached}" @click="cellClick(scope.row.examine_month, 'complaint_flow_conformity')">{{cellFilter(scope.row.complaint_flow_conformity.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>

                        <el-table-column
                          label="客户投诉纠正预防措施关闭率"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.complaint_rectify_closed_rate" :class="{'noReach': !scope.row.complaint_rectify_closed_rate.is_reached, 'reach': scope.row.complaint_rectify_closed_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'complaint_rectify_closed_rate')">{{cellFilter(scope.row.complaint_rectify_closed_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column align="center" label="阶段点质量评审">
                        <el-table-column
                          label="AB类项目阶段点流程覆盖率"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.period_flow_cover_rate" :class="{'noReach': !scope.row.period_flow_cover_rate.is_reached, 'reach': scope.row.period_flow_cover_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'period_flow_cover_rate')">{{cellFilter(scope.row.period_flow_cover_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>

                        <el-table-column
                          label="流程符合度"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.period_flow_conformity" :class="{'noReach': !scope.row.period_flow_conformity.is_reached, 'reach': scope.row.period_flow_conformity.is_reached}" @click="cellClick(scope.row.examine_month, 'period_flow_conformity')">{{cellFilter(scope.row.period_flow_conformity.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>

                        <el-table-column
                          label="评审计划偏差率"
                          align="center"
                          >
                          <el-table-column
                            label="TG4"
                            align="center"
                            >
                            <template slot-scope="scope">
                              <div v-if="scope.row.period_plan_deviation_rate_tg4" :class="{'noReach': !scope.row.period_plan_deviation_rate_tg4.is_reached, 'reach': scope.row.period_plan_deviation_rate_tg4.is_reached}" @click="cellClick(scope.row.examine_month, 'period_plan_deviation_rate_tg4')">{{cellFilter(scope.row.period_plan_deviation_rate_tg4.actual_value, 'percent')}}</div>
                              <div v-else>—</div>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="TG5"
                            align="center"
                            >
                            <template slot-scope="scope">
                              <div v-if="scope.row.period_plan_deviation_rate_tg5" :class="{'noReach': !scope.row.period_plan_deviation_rate_tg5.is_reached, 'reach': scope.row.period_plan_deviation_rate_tg5.is_reached}" @click="cellClick(scope.row.examine_month, 'period_plan_deviation_rate_tg5')">{{cellFilter(scope.row.period_plan_deviation_rate_tg5.actual_value, 'percent')}}</div>
                              <div v-else>—</div>
                            </template>
                          </el-table-column>
                        </el-table-column>

                        <el-table-column
                          label="评审一次通过率"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.period_review_pass_rate" :class="{'noReach': !scope.row.period_review_pass_rate.is_reached, 'reach': scope.row.period_review_pass_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'period_review_pass_rate')">{{cellFilter(scope.row.period_review_pass_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>

                        <el-table-column
                          label="评审发现问题关闭率"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.period_issue_closed_rate" :class="{'noReach': !scope.row.period_issue_closed_rate.is_reached, 'reach': scope.row.period_issue_closed_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'period_issue_closed_rate')">{{cellFilter(scope.row.period_issue_closed_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column v-if="!groupStatus" align="center" label="bug处理">
                        <el-table-column
                          label="AB类项目bug处理流程覆盖率"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.bug_flow_cover_rate" :class="{'noReach': !scope.row.bug_flow_cover_rate.is_reached, 'reach': scope.row.bug_flow_cover_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_flow_cover_rate')">{{cellFilter(scope.row.bug_flow_cover_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>

                        <el-table-column
                          label="流程符合度"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.bug_flow_conformity" :class="{'noReach': !scope.row.bug_flow_conformity.is_reached, 'reach': scope.row.bug_flow_conformity.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_flow_conformity')">{{cellFilter(scope.row.bug_flow_conformity.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>

                        <el-table-column
                          label="无效bug比例"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.invalid_bug_rate" :class="{'noReach': !scope.row.invalid_bug_rate.is_reached, 'reach': scope.row.invalid_bug_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'invalid_bug_rate')">{{cellFilter(scope.row.invalid_bug_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column v-else align="center" label="bug处理">
                        <el-table-column
                          label="Bug处理流程符合度(%)"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.bug_flow_conformity_for_customer" :class="{'noReach': !scope.row.bug_flow_conformity_for_customer.is_reached, 'reach': scope.row.bug_flow_conformity_for_customer.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_flow_conformity_for_customer')">{{cellFilter(scope.row.bug_flow_conformity_for_customer.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>

                        <el-table-column
                          label="无效Bug比例(%)"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.invalid_bug_rate_for_customer" :class="{'noReach': !scope.row.invalid_bug_rate_for_customer.is_reached, 'reach': scope.row.invalid_bug_rate_for_customer.is_reached}" @click="cellClick(scope.row.examine_month, 'invalid_bug_rate_for_customer')">{{cellFilter(scope.row.invalid_bug_rate_for_customer.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column align="center" label="发布流程">
                        <el-table-column
                          label="Release流程覆盖率"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.release_flow_cover_rate" :class="{'noReach': !scope.row.release_flow_cover_rate.is_reached, 'reach': scope.row.release_flow_cover_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'release_flow_cover_rate')">{{cellFilter(scope.row.release_flow_cover_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>

                        <el-table-column
                          v-if="!groupStatus"
                          label="流程符合度"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.release_flow_conformity" :class="{'noReach': !scope.row.release_flow_conformity.is_reached, 'reach': scope.row.release_flow_conformity.is_reached}" @click="cellClick(scope.row.examine_month, 'release_flow_conformity')">{{cellFilter(scope.row.release_flow_conformity.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>

                        <el-table-column
                          v-else
                          label="Release流程符合度"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.release_flow_conformity_for_customer" :class="{'noReach': !scope.row.release_flow_conformity_for_customer.is_reached, 'reach': scope.row.release_flow_conformity_for_customer.is_reached}" @click="cellClick(scope.row.examine_month, 'release_flow_conformity_for_customer')">{{cellFilter(scope.row.release_flow_conformity_for_customer.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column align="center" label="加减分项">
                        <el-table-column label="项目人员替换率" align="center">
                          <el-table-column
                            v-if="targetList.labor_replacement_ratio"
                            align="center"
                            :label="operatorList[targetList.labor_replacement_ratio.operator]+targetList.labor_replacement_ratio.indicator+'%'"
                            >
                            <template slot-scope="scope">
                              <div v-if="scope.row.labor_replacement_ratio" :class="{'noReach': !scope.row.labor_replacement_ratio.is_reached, 'reach': scope.row.labor_replacement_ratio.is_reached}" @click="cellClick(scope.row.examine_month, 'labor_replacement_ratio')">{{cellFilter(scope.row.labor_replacement_ratio.actual_value, 'percent')}}</div>
                              <div v-else>—</div>
                            </template>
                          </el-table-column>
                        </el-table-column>

                        <el-table-column label="客户投诉次数(次)" align="center">
                          <el-table-column
                            v-if="targetList.complaint_count"
                            :label="operatorList[targetList.complaint_count.operator]+targetList.complaint_count.indicator+'次'"
                            align="center"
                            >
                            <template slot-scope="scope">
                              <div v-if="scope.row.complaint_count" :class="{'noReach': !scope.row.complaint_count.is_reached, 'reach': scope.row.complaint_count.is_reached}" @click="cellClick(scope.row.examine_month, 'complaint_count')">{{cellFilter(scope.row.complaint_count.actual_value, 'cup')}}</div>
                              <div v-else>—</div>
                            </template>
                          </el-table-column>
                        </el-table-column>

                        <el-table-column label="因评审原因导致客户投诉次数(次)" align="center">
                          <el-table-column
                            v-if="targetList.period_by_complaint_count"
                            :label="operatorList[targetList.period_by_complaint_count.operator]+targetList.period_by_complaint_count.indicator+'次' || ''"
                            align="center"
                            >
                            <template slot-scope="scope">
                              <div v-if="scope.row.period_by_complaint_count" :class="{'noReach': !scope.row.period_by_complaint_count.is_reached, 'reach': scope.row.period_by_complaint_count.is_reached}" @click="cellClick(scope.row.examine_month, 'period_by_complaint_count')">{{cellFilter(scope.row.period_by_complaint_count.actual_value, 'cup')}}</div>
                              <div v-else>—</div>
                            </template>
                          </el-table-column>
                        </el-table-column>

                        <el-table-column align="center" label="Bug超期率(%)">
                          <el-table-column
                            v-if="targetList.bug_overtime_rate"
                            :label="operatorList[targetList.bug_overtime_rate.operator]+targetList.bug_overtime_rate.indicator+'%'"
                            align="center"
                            >
                            <template slot-scope="scope">
                              <div v-if="scope.row.bug_overtime_rate" :class="{'noReach': !scope.row.bug_overtime_rate.is_reached, 'reach': scope.row.bug_overtime_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_overtime_rate')">{{cellFilter(scope.row.bug_overtime_rate.actual_value, 'percent')}}</div>
                              <div v-else>—</div>
                            </template>
                          </el-table-column>
                        </el-table-column>

                        <el-table-column align="center" label="Bug comments填写规范度(%)">
                          <el-table-column
                            v-if="targetList.bug_comments"
                            :label="operatorList[targetList.bug_comments.operator]+targetList.bug_comments.indicator+'%'"
                            align="center"
                            >
                            <template slot-scope="scope">
                              <div v-if="scope.row.bug_comments" :class="{'noReach': !scope.row.bug_comments.is_reached, 'reach': scope.row.bug_comments.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_comments')">{{cellFilter(scope.row.bug_comments.actual_value, 'percent')}}</div>
                              <div v-else>—</div>
                            </template>
                          </el-table-column>
                        </el-table-column>

                        <el-table-column label="bug degrade率" align="center">
                          <el-table-column
                            v-if="targetList.bug_degrade_rate"
                            :label="operatorList[targetList.bug_degrade_rate.operator]+targetList.bug_degrade_rate.indicator+'%'"
                            align="center"
                            >
                            <template slot-scope="scope">
                              <div v-if="scope.row.bug_degrade_rate" :class="{'noReach': !scope.row.bug_degrade_rate.is_reached, 'reach': scope.row.bug_degrade_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_degrade_rate')">{{cellFilter(scope.row.bug_degrade_rate.actual_value, 'percent')}}</div>
                              <div v-else>—</div>
                            </template>
                          </el-table-column>
                        </el-table-column>

                        <el-table-column label="bug reopen率" align="center">
                          <el-table-column
                            v-if="targetList.bug_reopen_rate"
                            :label="operatorList[targetList.bug_reopen_rate.operator]+targetList.bug_reopen_rate.indicator+'%'"
                            align="center"
                            prop="bug_reopen_rate"
                            :formatter="point"
                            >
                            <template slot-scope="scope">
                              <div v-if="scope.row.bug_reopen_rate" :class="{'noReach': !scope.row.bug_reopen_rate.is_reached, 'reach': scope.row.bug_reopen_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_reopen_rate')">{{cellFilter(scope.row.bug_reopen_rate.actual_value, 'percent')}}</div>
                              <div v-else>—</div>
                            </template>
                          </el-table-column>
                        </el-table-column>

                        <el-table-column label="bug逃逸率" align="center">
                          <el-table-column
                            v-if="targetList.bug_escape_rate"
                            :label="operatorList[targetList.bug_escape_rate.operator]+targetList.bug_escape_rate.indicator+'%'"
                            align="center"
                            >
                            <template slot-scope="scope">
                              <div v-if="scope.row.bug_escape_rate" :class="{'noReach': !scope.row.bug_escape_rate.is_reached, 'reach': scope.row.bug_escape_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_escape_rate')">{{cellFilter(scope.row.bug_escape_rate.actual_value, 'percent')}}</div>
                              <div v-else>—</div>
                            </template>
                          </el-table-column>
                        </el-table-column>

                        <el-table-column label="无效版本比例" align="center">
                          <el-table-column
                            v-if="targetList.invalid_version_rate"
                            :label="operatorList[targetList.invalid_version_rate.operator]+targetList.invalid_version_rate.indicator+'%'"
                            align="center"
                            >
                            <template slot-scope="scope">
                              <div v-if="scope.row.invalid_version_rate" :class="{'noReach': !scope.row.invalid_version_rate.is_reached, 'reach': scope.row.invalid_version_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'invalid_version_rate')">{{cellFilter(scope.row.invalid_version_rate.actual_value, 'percent')}}</div>
                              <div v-else>—</div>
                            </template>
                          </el-table-column>
                        </el-table-column>
                      </el-table-column>
                  </el-table>
                  <el-pagination class="marT"
                    v-show="tableTotal > 10"
                    :page-size="tableSize"
                    background
                    @size-change="tableSizeChange"
                    @current-change="tableCurrentChange"
                    :current-page="tableCurrent"
                    layout="prev, pager, next"
                    style="text-align: center"
                    :total="tableTotal">
                  </el-pagination>
              </el-col>
          </el-row>
      </div>

      <el-dialog :visible.sync="dialogTableVisible">
        <el-table
          :data="gridData.slice((dialogCurrent-1)*dialogSize, dialogCurrent*dialogSize)"
          :header-cell-style="{background:'#eef1f6'}"
          style="width: 100%">
          <el-table-column prop="project_name" label="项目" width="180"></el-table-column>

          <el-table-column prop="conformity" label="值" width="120">
            <template slot-scope="scope">
              <div>{{ getPercent2(scope.row.conformity) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="评分" width="120">
            <template slot-scope="scope">
              <div>{{ cellFilter(scope.row.mark, 'point') }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="comments" label="备注"></el-table-column>
        </el-table>
        <el-pagination class="marT"
          v-show="dialogTotal > 10"
          :page-size="dialogSize"
          background
          @size-change="dialogSizeChange"
          @current-change="dialogCurrentChange"
          :current-page="dialogCurrent"
          layout="prev, pager, next"
          style="text-align: center"
          :total="dialogTotal">
        </el-pagination>
      </el-dialog>
    </template>
    <el-dialog :visible.sync="dialogTableVisible2" :id="dialogType == 'period'?'dialog':''">
      <template>
        <el-tabs v-if="abtype" v-model="activeNameOther" type="card" @tab-click="handleClick"  >
          <!-- 已监管 -->
          <el-tab-pane label="已监管AB类项目" name="first">
            <el-tag type="success" effect="dark" style="margin-bottom: 10px" >Done</el-tag>
            <el-tag type="info" effect="dark">NG</el-tag>
            <el-tag type="danger" effect="dark">Delay</el-tag>
            <el-tag type="warning" effect="dark">Proceeding</el-tag>
            <el-tag color="#fff"><span style="color:#000;border-color: #000">未开始</span></el-tag>
            <el-button class="loader" type="primary" @click="getExcelFile">导出</el-button>
            <el-table
              ref="filterTable"
              :header-cell-style="{background:'#eef1f6'}"
              style="width: 100%"
              :cell-class-name="addClass"
              :data="initTable.slice((initCurrent-1)*initSize, initCurrent*initSize)"
              :border="true">
              <el-table-column
                align="center"
                prop="group_name"
                label="事业群"
                >
              </el-table-column>
              <el-table-column
                align="center"
                prop="dept_name"
                label="事业部"
                >
              </el-table-column>
              <el-table-column
                align="center"
                prop="project_name"
                label="项目名">
              </el-table-column>
              <el-table-column
                align="center"
                prop="product_manager"
                label="产品经理">
              </el-table-column>
              <el-table-column
                align="center"
                prop="project_level"
                label="项目等级">
              </el-table-column>
              <el-table-column
                v-if="dialogType == 'period'"
                align="center"
                prop="TG0"
                label="TG0"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG0']?scope.row['TG0'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG1"
                label="TG1"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG1']?scope.row['TG1'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG2"
                label="TG2"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG2']?scope.row['TG2'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG3.1"
                label="TG3.1"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG3.1']?scope.row['TG3.1'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG3.2"
                label="TG3.2"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG3.2']?scope.row['TG3.2'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG4.1"
                label="TG4.1"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG4.1']?scope.row['TG4.1'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG4.2"
                label="TG4.2"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG4.2']?scope.row['TG4.2'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG5"
                label="TG5"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG5']?scope.row['TG5'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG6"
                label="TG6"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG6']?scope.row['TG6'].plan_date:''}}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination class="marT"
              v-show="initTotal > 10"
              :page-size="initSize"
              background
              @size-change="initSizeChange"
              @current-change="initCurrentChange"
              :current-page="initCurrent"
              layout="prev, pager, next"
              style="text-align: center"
              :total="initTotal">
            </el-pagination>
          </el-tab-pane>
          <!-- 未监管 -->
          <el-tab-pane label="未监管AB类项目" name="second">
            <el-table
              ref="filterTable1"
              :header-cell-style="{background:'#eef1f6'}"
              style="width: 100%"
              :cell-class-name="addClass"
              :data="initTable2.slice((initCurrent2-1)*initSize2, initCurrent2*initSize2)"
              :border="true">
              <el-table-column
                align="center"
                prop="group_name"
                label="事业群"
                >
              </el-table-column>
              <el-table-column
                align="center"
                prop="dept_name"
                label="事业部"
                >
              </el-table-column>
              <el-table-column
                align="center"
                prop="project_name"
                label="项目名">
              </el-table-column>
              <el-table-column
                align="center"
                prop="product_manager"
                label="产品经理">
              </el-table-column>
              <el-table-column
                align="center"
                prop="project_level"
                label="项目等级">
              </el-table-column>
            </el-table>
            <el-pagination class="marT"
              v-show="initTotal2 > 1"
              :page-size="initSize2"
              background
              @size-change="initSizeChange2"
              @current-change="initCurrentChange2"
              :current-page="initCurrent2"
              layout="prev, pager, next"
              style="text-align: center"
              :total="initTotal2">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
        <span v-else>
            <el-tag v-if="dialogType == 'period'" type="success" effect="dark" style="margin-bottom: 10px">Done</el-tag>
            <el-tag v-if="dialogType == 'period'" type="info" effect="dark">NG</el-tag>
            <el-tag v-if="dialogType == 'period'" type="danger" effect="dark">Delay</el-tag>
            <el-tag v-if="dialogType == 'period'" type="warning" effect="dark">Proceeding</el-tag>
            <el-tag v-if="dialogType == 'period'" color="#fff"><span style="color:#000;border-color: #000">未开始</span></el-tag>
            <el-button class="loader" type="primary" @click="getExcelFile">导出</el-button>
            <el-table
              ref="filterTable2"
              :header-cell-style="{background:'#eef1f6'}"
              style="width: 100%"
              :cell-class-name="addClass"
              :data="initTable.slice((initCurrent-1)*initSize, initCurrent*initSize)"
              :border="true">
              <el-table-column
                align="center"
                prop="group_name"
                label="事业群"
                >
              </el-table-column>
              <el-table-column
                align="center"
                prop="dept_name"
                label="事业部"
                >
              </el-table-column>
              <el-table-column
                align="center"
                prop="project_name"
                label="项目名">
              </el-table-column>
              <el-table-column
                align="center"
                prop="product_manager"
                label="产品经理">
              </el-table-column>
              <el-table-column
                align="center"
                prop="project_level"
                label="项目等级">
              </el-table-column>
              <el-table-column
                v-if="dialogType == 'period'"
                align="center"
                prop="TG0"
                label="TG0"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG0']?scope.row['TG0'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG1"
                label="TG1"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG1']?scope.row['TG1'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG2"
                label="TG2"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG2']?scope.row['TG2'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG3.1"
                label="TG3.1"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG3.1']?scope.row['TG3.1'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG3.2"
                label="TG3.2"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG3.2']?scope.row['TG3.2'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG4.1"
                label="TG4.1"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG4.1']?scope.row['TG4.1'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG4.2"
                label="TG4.2"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG4.2']?scope.row['TG4.2'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG5"
                label="TG5"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG5']?scope.row['TG5'].plan_date:''}}
                </template>
              </el-table-column>
              <el-table-column
              v-if="dialogType == 'period'"
                align="center"
                prop="TG6"
                label="TG6"
                :filters="filterList"
                :filter-method="filterTG">
                <template slot-scope="scope">
                  {{scope.row['TG6']?scope.row['TG6'].plan_date:''}}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination class="marT"
              v-show="initTotal > 1"
              :page-size="initSize"
              background
              @size-change="initSizeChange"
              @current-change="initCurrentChange"
              :current-page="initCurrent"
              layout="prev, pager, next"
              style="text-align: center"
              :total="initTotal">
            </el-pagination>
        </span>
      </template>
    </el-dialog>

     <el-dialog :visible.sync="dialogTableVisible3" width="90%">
       <el-button class="loader" type="primary" @click="getExcelFile1" v-if="is_download === 1">导出</el-button>
        <el-table
            :header-cell-style="{background:'#eef1f6'}"
            v-loading="tableLoading"
            :data="tableData1"
            style="width: 100%"
            type=index
            :cell-class-name="addClass1">
            <el-table-column
              label="项目信息"
              width="80"
              prop="examine_month"
              ref="goodsDetailTable"
              fixed
              >
                <el-table-column
                  label="项目名称"
                  prop="project"
                  align="center"
                  >
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{"指标"}}</div>
                    <div v-else>{{scope.row.project}}</div>
                  </template>
                </el-table-column>

                <el-table-column
                  label="客户经理"
                  prop="am"
                  align="center"
                >
                  <template slot-scope="scope">
                      <div v-if="scope.$index == 0" style="visibility: visible">{{"/"}}</div>
                      <div v-else style="visibility: visible">{{scope.row.am}}</div>
                    </template>
                </el-table-column>

                <el-table-column
                  label="项目经理"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0" style="visibility: visible">{{"/"}}</div>
                      <div v-else style="visibility: visible">{{scope.row.pm}}</div>
                    </template>
                </el-table-column>
            </el-table-column>

            <el-table-column align="center" label="客户满意度管理-客户投诉">
              <el-table-column
                label="客户流程覆盖率"
                align="center"
                prop="complaint_flow_cover_rate"
                >
                  <template slot-scope="scope">
                      <div v-if="scope.$index == 0">{{operatorList[targetList.complaint_flow_cover_rate.operator]+targetList.complaint_flow_cover_rate.indicator+'%'}}</div>
                      <div  v-else>{{scope.row.complaint_flow_cover_rate}}</div>
                    </template>
              </el-table-column>

              <el-table-column
                label="客户流程符合度"
                align="center"
                >
                  <template slot-scope="scope">
                      <div v-if="scope.$index == 0">{{operatorList[targetList.complaint_flow_conformity.operator]+targetList.complaint_flow_conformity.indicator+'%'}}</div>
                      <div  v-else>{{scope.row.complaint_flow_conformity}}</div>
                    </template>
              </el-table-column>

              <el-table-column
                label="客户投诉纠正预防措施关闭率"
                align="center"
                >
                    <template slot-scope="scope">
                      <div v-if="scope.$index == 0">{{operatorList[targetList.complaint_rectify_closed_rate.operator]+targetList.complaint_rectify_closed_rate.indicator+'%'}}</div>
                      <div  v-else>{{scope.row.complaint_rectify_closed_rate}}</div>
                    </template>
              </el-table-column>
            </el-table-column>

            <el-table-column align="center" label="阶段点质量评审">
              <el-table-column
                label="AB类项目阶段点流程覆盖率"
                align="center"
                prop="period_flow_cover_rate"
                >
                <el-table-column>>
                    <template slot-scope="scope">
                      <div v-if="scope.$index == 0">{{operatorList[targetList.period_flow_cover_rate.operator]+targetList.period_flow_cover_rate.indicator+'%'}}</div>
                      <div  v-else>{{scope.row.period_flow_cover_rate}}</div>
                    </template>
                </el-table-column>
              </el-table-column>

              <el-table-column
                label="流程符合度"
                align="center"
                prop="period_flow_conformity"
                >
                    <template slot-scope="scope">
                      <div v-if="scope.$index == 0">{{operatorList[targetList.period_flow_conformity.operator]+targetList.period_flow_conformity.indicator+'%'}}</div>
                      <div  v-else>{{scope.row.period_flow_conformity}}</div>
                    </template>
              </el-table-column>

              <el-table-column
                label="评审计划偏差率"
                align="center"
                >
                <el-table-column
                  label="TG4"
                  align="center"
                  prop="period_plan_deviation_rate_tg4"
                  >
                    <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.period_plan_deviation_rate_tg4.operator]+targetList.period_plan_deviation_rate_tg4.indicator +'%'}}</div>
                    <div v-else>{{scope.row.period_plan_deviation_rate_tg4}}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="TG5"
                  align="center"
                  prop="period_plan_deviation_rate_tg5"
                  >>
                    <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.period_plan_deviation_rate_tg5.operator]+targetList.period_plan_deviation_rate_tg5.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.period_plan_deviation_rate_tg5}}</div>
                  </template>
                </el-table-column>
              </el-table-column>

              <el-table-column
                label="评审一次通过率"
                align="center"
                prop="period_review_pass_rate"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.period_review_pass_rate.operator]+targetList.period_review_pass_rate.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.period_review_pass_rate}}</div>
                  </template>
              </el-table-column>

              <el-table-column
                label="评审发现问题关闭率"
                align="center"
                prop="period_issue_closed_rate"
                >
                <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.period_issue_closed_rate.operator]+targetList.period_issue_closed_rate.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.period_issue_closed_rate}}</div>
                  </template>
              </el-table-column>
            </el-table-column>

            <el-table-column v-if="!groupStatus" align="center" label="bug处理">
              <el-table-column
                label="AB类项目bug处理流程覆盖率"
                align="center"
                prop="bug_flow_cover_rate"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.bug_flow_cover_rate.operator]+targetList.bug_flow_cover_rate.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.bug_flow_cover_rate}}</div>
                  </template>
              </el-table-column>

              <el-table-column
                label="流程符合度"
                align="center"
                prop="bug_flow_conformity"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.bug_flow_conformity.operator]+targetList.bug_flow_conformity.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.bug_flow_conformity}}</div>
                  </template>
              </el-table-column>

              <el-table-column
                label="无效bug比例"
                align="center"
                prop="invalid_bug_rate"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.invalid_bug_rate.operator]+targetList.invalid_bug_rate.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.invalid_bug_rate}}</div>
                  </template>
              </el-table-column>
            </el-table-column>

            <el-table-column v-else align="center" label="bug处理">
              <el-table-column
                label="Bug处理流程符合度(%)"
                align="center"
                prop="bug_flow_conformity_for_customer"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.bug_flow_conformity_for_customer.operator]+targetList.bug_flow_conformity_for_customer.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.bug_flow_conformity_for_customer}}</div>
                  </template>
              </el-table-column>

              <el-table-column
                label="无效Bug比例(%)"
                align="center"
                prop="invalid_bug_rate_for_customer"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.invalid_bug_rate_for_customer.operator]+targetList.invalid_bug_rate_for_customer.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.invalid_bug_rate_for_customer}}</div>
                  </template>
              </el-table-column>
            </el-table-column>

            <el-table-column align="center" label="发布流程">
              <el-table-column
                label="Release流程覆盖率"
                align="center"
                prop="release_flow_cover_rate"
                >
                <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.release_flow_cover_rate.operator]+targetList.release_flow_cover_rate.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.release_flow_cover_rate}}</div>
                </template>
              </el-table-column>

              <el-table-column
                v-if="!groupStatus"
                label="流程符合度"
                align="center"
                prop="release_flow_conformity"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.release_flow_conformity.operator]+targetList.release_flow_conformity.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.release_flow_conformity}}</div>
                  </template>
              </el-table-column>

              <el-table-column
                v-else
                label="Release流程符合度"
                align="center"
                prop="release_flow_conformity_for_customer"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.release_flow_conformity_for_customer.operator]+targetList.release_flow_conformity_for_customer.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.release_flow_conformity_for_customer}}</div>
                  </template>
              </el-table-column>
            </el-table-column>

            <el-table-column
              align="center"
              label="加减分项">
              <el-table-column
                label="项目人员替换率"
                align="center"
                prop="labor_replacement_ratio">
                <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.labor_replacement_ratio.operator]+targetList.labor_replacement_ratio.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.labor_replacement_ratio}}</div>
                  </template>
              </el-table-column>

              <el-table-column label="客户投诉次数(次)" align="center" prop="complaint_count">
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.complaint_count.operator]+targetList.complaint_count.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.complaint_count}}</div>
                  </template>
              </el-table-column>

              <el-table-column label="因评审原因导致客户投诉次数(次)" align="center" prop="period_by_complaint_count">
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.period_by_complaint_count.operator]+targetList.period_by_complaint_count.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.period_by_complaint_count}}</div>
                  </template>
              </el-table-column>

              <el-table-column align="center" label="Bug超期率(%)" prop="bug_overtime_rate">
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.bug_overtime_rate.operator]+targetList.bug_overtime_rate.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.bug_overtime_rate}}</div>
                  </template>
              </el-table-column>

              <el-table-column align="center" label="Bug comments填写规范度(%)" prop="bug_comments">
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.bug_comments.operator]+targetList.bug_comments.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.bug_comments}}</div>
                  </template>
              </el-table-column>

              <el-table-column label="bug degrade率" align="center" prop="bug_degrade_rate">
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.bug_degrade_rate.operator]+targetList.bug_degrade_rate.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.bug_degrade_rate}}</div>
                  </template>
              </el-table-column>

              <el-table-column label="bug reopen率" align="center" prop="bug_reopen_rate">
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.bug_reopen_rate.operator]+targetList.bug_reopen_rate.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.bug_reopen_rate}}</div>
                  </template>
              </el-table-column>

              <el-table-column label="bug逃逸率" align="center" prop="bug_escape_rate">
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.bug_escape_rate.operator]+targetList.bug_escape_rate.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.bug_escape_rate}}</div>
                  </template>
              </el-table-column>

              <el-table-column label="无效版本比例" align="center" prop="invalid_version_rate">
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">{{operatorList[targetList.invalid_version_rate.operator]+targetList.invalid_version_rate.indicator+'%'}}</div>
                    <div  v-else>{{scope.row.invalid_version_rate}}</div>
                  </template>
              </el-table-column>
            </el-table-column>
        </el-table>

        <el-pagination class="marT"
          v-show="dialogTotal > 10"
          :page-size="dialogSize"
          background
          @size-change="dialogSizeChange"
          @current-change="dialogCurrentChange"
          :current-page="dialogCurrent"
          layout="prev, pager, next"
          style="text-align: center"
          :total="dialogTotal">
        </el-pagination>
      </el-dialog>
  </div>
</template>

<script>
import DataChoose from '@/views/data/dataChoose'
import VChoose from '@/views/summary/choose'
import VCharts from '@/components/charts/index'
import VLabel from '@/components/qa/Label'
import { getHeader } from '@/app.config'
import { removeToken, removeName } from '@/utils/auth'
import { mapState } from 'vuex'
import http from '@/views/sys/axios'

export default {
  data() {
    return {
      dateTime:'',
      indicator:{
        tt:'00'
      },
      is_download:'',
      tableData1: [],
      tableSize1: 10,
      tableCurrent1: 1,
      tableLoading1: false,
      tableTotal1: 0,
      clickGroupId:[],
      abtype: true,
      activeName: 'first',
      activeNameOther: 'first',
      name: '',
      dialogTableVisible: false,
      dialogTableVisible2: false,
      dialogTableVisible3: false,
      initTable: [],
      initTable2: [],
      initLoading: false,
      initCurrent: 1,
      initCurrent2:1,
      initSize: 10,
      initSize2:10,
      initTotal: 0,
      initTotal2: 0,
      gridData: [],
      gridLoading: false,
      kpilableTable: [],
      dialogCurrent: 1,
      dialogSize: 10,
      dialogTotal: 0,
      selected: 'AB类项目总数',
      dialogType: '',
      response: {},
      filterList: [{text: '未开始', value: 0},{text: 'Done', value: 1},{text: 'NG', value: 2},{text: 'Delay', value: 3},{text: 'Proceeding', value: 4}],
      downloadInfo: {
        group_id: '',
        projectType: '',
        projectType2: ''
      },
      targetList: {
        bug_comments: {operator: 2, indicator: 50, type: "percent"},
        bug_degrade_rate: {operator: 2, indicator: 50, type: "percent"},
        bug_escape_rate: {operator: 2, indicator: 50, type: "percent"},
        bug_flow_conformity: {operator: 2, indicator: 50, type: "percent"},
        bug_flow_cover_rate: {operator: 2, indicator: 50, type: "percent"},
        bug_overtime_rate: {operator: 3, indicator: 50, type: "percent"},
        bug_reopen_rate: {operator: 2, indicator: 50, type: "percent"},
        complaint_count: {operator: 3, indicator: 50, type: "次"},
        complaint_flow_conformity: {operator: 2, indicator: 50, type: "percent"},
        complaint_flow_cover_rate: {operator: 2, indicator: 50, type: "percent"},
        complaint_rectify_closed_rate: {operator: 2, indicator: 50, type: "percent"},
        improve_score: {operator: 0, indicator: 1, type: ""},
        invalid_bug_rate: {operator: 2, indicator: 50, type: "percent"},
        invalid_version_rate: {operator: 2, indicator: 50, type: "percent"},
        labor_replacement_ratio: {operator: 2, indicator: 50, type: "percent"},
        period_by_complaint_count: {operator: 3, indicator: 50, type: "次"},
        period_flow_conformity: {operator: 2, indicator: 50, type: "percent"},
        period_flow_cover_rate: {operator: 2, indicator: 50, type: "percent"},
        period_issue_closed_rate: {operator: 2, indicator: 50, type: "percent"},
        period_plan_deviation_rate_tg4: {operator: 5, indicator: 22.3, type: "percent"},
        period_plan_deviation_rate_tg5: {operator: 6, indicator: 12.23, type: "percent"},
        period_review_pass_rate: {operator: 2, indicator: 50, type: "percent"},
        release_flow_conformity: {operator: 2, indicator: 50, type: "percent"},
        release_flow_cover_rate: {operator: 2, indicator: 50, type: "percent"},
      },
      operatorList: ['>', '<', '>=', "<=", '=','[]','()'],
      periodLineEmpty: false,
      periodLineLoading: false,
      periodLineData: {
        columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
        rows: []
      },
      complaintLineData: {
        columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
        rows: []
      },
      releaseLineData: {
        columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
        rows: []
      },
      bugLineData: {
        columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
        rows: []
      },
      activeName: "1",
      ponitData: {
        columns: ['examine_month', 'total_mark'],
        rows: []
      },
      pointTable: [],
      pointSize: 10,
      pointCurrent: 1,
      pointTotal: 0,
      pointLoading: false,
      pointEmpty: true,
      periodData: {
        columns: ['examine_month', 'period_flow_conformity', 'period_flow_cover_rate', 'period_issue_closed_rate', 'period_plan_deviation_rate', 'period_review_pass_rate'],
        rows: []
      },
      defectData: {
        columns: ['examine_month', 'bug_flow_conformity', 'bug_flow_cover_rate', 'invalid_bug_rate'],
        rows: []
      },
      complaintData: {
        columns: ['examine_month', 'complaint_count', 'complaint_flow_conformity', 'complaint_flow_cover_rate', 'complaint_rectify_closed_rate'],
        rows: []
      },
      releaseData: {
        columns: ['examine_month', 'release_flow_conformity', 'release_flow_cover_rate'],
        rows: []
      },
      periodDataEmpty: true,
      periodLoading: false,
      settings: {
        labelMap: {
          period_flow_conformity: '流程符合度(%)',
          period_flow_cover_rate: 'AB类项目流程覆盖率(%)',
          period_issue_closed_rate: '评审发现问题关闭率(%)',
          period_plan_deviation_rate: '评审计划偏差率(%)',
          period_review_pass_rate: '评审一次通过率(%)',
          complaint_count: '客户投诉次数(次)',
          complaint_flow_conformity: '流程符合度(%)',
          complaint_flow_cover_rate: '客诉流程覆盖率(%)',
          complaint_rectify_closed_rate: '客诉纠正预防措施关闭率(%)',
          bug_flow_conformity: '流程符合度(%)',
          bug_flow_cover_rate: 'AB类项目流程覆盖率(%)',
          invalid_bug_rate: '无效bug比例(%)',
          release_flow_conformity: '流程符合度(%)',
          release_flow_cover_rate: '流程覆盖率(%)',
          total_mark: 'KPI评分(分)',
          carLine: '智能汽车事业群(个)',
          innovateLine: '智能视觉事业群(个)',
          thingLine: '智能物联网事业群(个)',
          solveLine: '智能解决方案事业群(个)',
          terminalLine: '智能终端事业群(个)'
        }
      },
      settings2: {
        yAxisType: ['percent'],
        labelMap: {
          carLine: '智能汽车事业群(%)',
          innovateLine: '智能视觉事业群(%)',
          thingLine: '智能物联网事业群(%)',
          solveLine: '智能解决方案事业群(%)',
          terminalLine: '智能终端事业群(%)'
        }
      },
      dataZoom: [{
        type: 'slider',
        start: 0,
        end: 100
      }],
      tableData: [
        {
          month: '9月',
          cover: 1,
          good: 0.94,
          close: 1,
          ABcover: 1,
          process: 0.9653,
          gerrit: 1,
          gerritPass: 0.9167,
          gerritClose: 0.9750,
          bugCover: 0,
          bugProcess: 0.767,
          ineffective: 0.0065,
          releaseCover: 0,
          releaseProcess: 0.9615,
          complaintNum: 1,
          degrade: 0.0095,
          reopen: 0.0144,
          bugrun: 0,
          ineffectiveBuild: 0.012
        }
      ],
      tableSize: 10,
      tableCurrent: 1,
      tableLoading: false,
      tableTotal: 0
    }
  },
  components: {
    VChoose,
    VCharts,
    VLabel
  },
  computed: {
    ...mapState({
        chooseList: state => state.chooseList
    }),
    groupStatus() {
      if (this.chooseList.groupId === 261 || this.chooseList.groupId === 263) {
        return true
      } else {
        return false
      }
    }
  },

  methods: {
    // 点击显示所有监控情况弹框
    getDatakpi(name){
      http.get(`/api/indicator/examine/project/data?groupId=${this.chooseList.groupId}&date=${name}`)
      .then(res => {
        const { data, code } = res
        if(res.code === 200){
          // console.log(1111,res.data[1].bug_comments_color)
          this.is_download = res.is_download
          this.tableData1 = []
          this.indicator = res.indicator_value
          let item = {}
          for(let k in res.indicator_value) {
            item[k] = res.indicator_value[k].indicator
          }
          this.tableData1 = res.data
          this.tableData1.unshift(item)
        }
      })
    },
    kpiListClick(name){
      this.getDatakpi(name)
      this.dialogTableVisible3 = true
      // http.get(`/api/indicator/examine/project/data?groupId=${this.chooseList.groupId}`)
      // .then(res => {
      //   // const { data, code } = res
      //   // console.log(code)
      //   if(res.code == 200){
      //     this.tableData1 = res.data
      //     console.log("res",res.data)

      //   }else if (res.code === 400 ){
      //     this.$message.error(msg)
      //   }
      // })

    },
    // 导出
    getExcelFile() {
        http.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/examine/project/detail?groupId=${this.downloadInfo.group_id}&time=${this.chooseList.time}&sys_type=${this.dialogType}&is_ab=${this.downloadInfo.projectType=='ab_project'?true:false}&download=true`, { responseType: 'blob' })
        .then(res => {
          const { data, code } = res
          if(code === 200) {
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            link.setAttribute('download', '阶段点评审数据报表.xlsx')
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
          } else {
            this.$message.error('下载出错了!');
          }
        }).catch(err => {
          const { data } = err

          if(data) {
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            link.setAttribute('download', '阶段点评审数据报表.xlsx')
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
          } else {
            this.$message.error('下载出错了!');
          }
        })
      },

    // 导出 KPI列表
    getExcelFile1() {
        http.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/examine/project/data?groupId=${this.chooseList.groupId}&date=${name}&download=true`, { responseType: 'blob' })
        .then(res => {
          const { data, code } = res
          if(code === 200) {
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            link.setAttribute('download', 'KPI列表.xlsx')
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
          } else {
            this.$message.error('下载出错了!');
          }
        }).catch(err => {
          const { data } = err

          if(data) {
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            link.setAttribute('download', 'KPI列表.xlsx')
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
          } else {
            this.$message.error('下载出错了!');
          }
        })
      },

    handleClick(tab, event) {
        console.log(tab, event);
      },
    kpiClick(group_id, projectType, label, type, projectType2) {
      this.abtype = (type && label == 'period')
      this.initLoading = false
      this.dialogType = label
      this.initCurrent = 1
      this.downloadInfo.group_id = group_id
      this.downloadInfo.projectType = projectType
      this.downloadInfo.projectType2 = projectType2
      http.get(`/api/indicator/examine/project/detail?groupId=${group_id}&time=${this.chooseList.time}&sys_type=${label}&is_ab=${projectType=='ab_project'?true:false}&no_supervise=${projectType2=='no_supervise_ab_project_data'?true:false}`)
      .then(res => {
        if(res.code === 200) {
          this.initLoading = true
          this.dialogTableVisible2 = true
          if(projectType === 'ab_project' || projectType2=== 'no_supervise_ab_project_data') {
            this.initTable = res.ab_project
            this.initTable2 = res.no_supervise_ab_project_data
          } else {
            this.initTable = res.project
            this.initTable2 = res.project
          }
          this.initTotal = this.initTable.length
          this.initTotal2 = this.initTable2.length

        } else {
          this.initLoading = false
        }
      }).catch(error => {
        this.initLoading = false
      })
    },
    toKpiPage() {
      this.$router.push({
        path: '/qa_kanban/datas'
      })
    },
    toKpiConfig() {
      this.$router.push({
        path: '/qa_kanban/mark'
      })
    },
    filter(num) {
      let value
      num ? value = num : value = 0
      return value
    },
    filterTG(value, row, column) {
      if(row[column.property]) {
        console.log(111,column.property)
        return row[column.property].status === value;
      } else {
        return false
      }
    },
    changed(val) {
      if(val == 'AB类项目总数') {
        this.periodLineData.rows = this.getLineDataKey(this.response.ab_project_count_trend.period)
        this.complaintLineData.rows = this.getLineDataKey(this.response.ab_project_count_trend.complaint)
        this.bugLineData.rows = this.getLineDataKey(this.response.ab_project_count_trend.bug)
        this.releaseLineData.rows = this.getLineDataKey(this.response.ab_project_count_trend.release)
      } else if(val == 'AB类项目覆盖率') {
        this.periodLineData.rows = this.getLineDataKey(this.response.ab_project_cover_rate_trend.period)
        this.complaintLineData.rows = this.getLineDataKey(this.response.ab_project_cover_rate_trend.complaint)
        this.bugLineData.rows = this.getLineDataKey(this.response.ab_project_cover_rate_trend.bug)
        this.releaseLineData.rows = this.getLineDataKey(this.response.ab_project_cover_rate_trend.release)
      } else if(val == '所有项目总数') {
        this.periodLineData.rows = this.getLineDataKey(this.response.project_count_trend.period)
        this.complaintLineData.rows = this.getLineDataKey(this.response.project_count_trend.complaint)
        this.bugLineData.rows = this.getLineDataKey(this.response.project_count_trend.bug)
        this.releaseLineData.rows = this.getLineDataKey(this.response.project_count_trend.release)
      } else {
        this.periodLineData.rows = this.getLineDataKey(this.response.project_cover_rate_trend.period)
        this.complaintLineData.rows = this.getLineDataKey(this.response.project_cover_rate_trend.complaint)
        this.bugLineData.rows = this.getLineDataKey(this.response.project_cover_rate_trend.bug)
        this.releaseLineData.rows = this.getLineDataKey(this.response.project_cover_rate_trend.release)
      }
    },
    cellFilter(val, type) {
      let value
      if(type == 'point') {
        val != undefined ? value = `${Number(val).toFixed(2)}分` : value = '—'
      } else if(type == "percent") {
        val != undefined ? value = `${Number(val).toFixed(2)}%` : value = '—'
      } else if(type == "cup") {
        val != undefined ? value = `${val}次` : value = '—'
      } else {
        val != undefined ? value = `${val}` : value = '—'
      }
      return value
    },
    getPercent(num) {
      let number
      num ? number = (num*100).toFixed(2) + '%' : number = '0.00%'
      return number
    },
    getPercent2(num) {
      let number
      if(this.name == 'complaint_count' || this.name == 'period_by_complaint_count') {
        num ? number = `${num}次` : number = '0次'
      } else {
        num ? number = (num*100).toFixed(2) + '%' : number = '0.00%'
      }
      return number
    },
    cellClick(month, name) {
      this.gridLoading = true
      this.gridData = []
      this.name = name
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/examine/detail?month=${month}&examine_item=${name}&groupId=${this.chooseList.groupId}`, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.dialogTableVisible = true
            this.dialogCurrent = 1
            this.gridLoading = false
            this.gridData = res.data.data
            this.dialogTotal = this.gridData.length
          } else {
            this.gridLoading = false
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    point(row, column, cellValue, index) {
      if(cellValue != undefined) {
        return `${cellValue}分`
      } else {
        return '—'
      }
    },
    primary(row, column, cellValue, index) {
      if(cellValue != undefined) {
        return `${cellValue}次`
      } else {
        return '—'
      }
    },
    formatter(row, column, cellValue, index) {
      if(cellValue != undefined) {
        return `${Number(cellValue).toFixed(2)}%`
      } else {
        return '—'
      }
    },
    getLineDataKey(arr) {
      if(!arr.length) {
        return []
      }

      let result = arr.map(val => {
        return {
          examine_month: val.month,
          carLine: val['30'],
          innovateLine: val['31'],
          thingLine: val['23'],
          solveLine: val['265'],
          terminalLine: val['261']
        }
      })
      return result
    },
    dialogCurrentChange(val) {
      this.dialogCurrent = 1
      this.dialogCurrent = val
    },
    dialogSizeChange(val) {
      this.dialogSize = val
    },
    initCurrentChange(val) {
      this.initCurrent = 1
      this.initCurrent = val
    },
    initCurrentChange2(val2) {
      this.initCurrent2 = 1
      this.initCurrent2 = val2
    },
    initSizeChange(val) {
      this.initSize = val
    },
    initSizeChange2(val2) {
      this.initSize2 = val2
    },
    tableCurrentChange(val) {
      this.tableCurrent = val
    },
    tableSizeChange(val) {
      this.tableSize = val
    },
    pointCurrentChange(val) {
      this.pointCurrent = val
    },
    pointSizeChange(val) {
      this.pointSize = val
    },
    getTarget() {
      http.get(`/api/indicator/examine/indicator/value?groupId=${this.chooseList.groupId}&time=${this.chooseList.time}`)
      .then(res => {
        if(res.code === 200) {
          if(JSON.stringify(res.indicator_value) !== '{}') {
            this.targetList = res.indicator_value
          }
        }
      })
    },
    getData() {
      this.tableData = []
      this.periodData.rows = []
      this.defectData.rows = []
      this.complaintData.rows = []
      this.releaseData.rows = []
      this.pointLoading = true
      this.pointTable = []
      this.periodLoading = true
      this.tableLoading = true
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/examine/data?groupId=${this.chooseList.groupId}&time=${this.chooseList.time}`, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            // console.log("res",res.data.data[0].examine_month)
          //   let arr = []
          //   for ( let val of res.data.data){
          //     arr.push(val.examine_month)
          // }
          // this.dateTime = arr.join()
            this.periodLoading = false
            this.tableLoading = false
            this.pointLoading = false
            if(res.data.indicator_trend.length > 0) {
              this.periodDataEmpty = false
            }
            // if(res.data.score_trend[0].total_mark) {
              this.ponitData.rows = res.data.score_trend
            // }
            this.tableData = res.data.data
            this.pointTable = res.data.score_trend

            if(!this.ponitData.rows.length) {
              this.pointEmpty = true
            } else {
              this.pointEmpty = false
            }
            this.pointTotal = this.pointTable.length
            this.periodData.rows = res.data.indicator_trend
            this.defectData.rows = res.data.indicator_trend
            this.complaintData.rows = res.data.indicator_trend
            // if(res.data.indicator_trend[0].release_flow_conformity) {
              this.releaseData.rows = res.data.indicator_trend
            // }

            this.tableTotal = res.data.data.length
          } else {
            this.periodLoading = false
            this.periodDataEmpty = true
            this.tableLoading = false
            this.pointLoading = false
          }
        }
      })
    },
    addClass1({row,column,rowIndex,columnIndex}){
      console.log(column)
      if(row[column.property+'_color'] === 1){
              console.log(111)
              return 'cell-red'
        }
        if(row[column.property+'_color'] === 2){
              return 'cell-yellow'
              console.log(222)
        }
        if(row[column.property+'_color'] === 0){
              return ''
              console.log(333)
        }

    },
    addClass({row,column,rowIndex,columnIndex}){

      if(column.property.includes('TG')&&row[column.property]) {
        if(row[column.property].status == 0){
            return '';
        }
        if(row[column.property].status == 1){
            return 'cell-green';
        }
        if(row[column.property].status == 2){
            return 'cell-grey';
        }
        if(row[column.property].status == 3){
            return 'cell-red';
        }
        if(row[column.property].status == 4){
            return 'cell-yellow';
        }
      } else {
        return ''
      }
    },
    getSummary() {
      let group = ''
      this.periodLineData.rows = []
      this.complaintLineData.rows = []
      this.bugLineData.rows = []
      this.releaseLineData.rows = []
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/examine/flow/summary?groupId=${group}&time=${this.chooseList.time}`, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.response = res.data
            this.kpilableTable = res.data.table_data
            this.periodLineData.rows = this.getLineDataKey(res.data.ab_project_count_trend.period)
            this.complaintLineData.rows = this.getLineDataKey(res.data.ab_project_count_trend.complaint)
            this.bugLineData.rows = this.getLineDataKey(res.data.ab_project_count_trend.bug)
            this.releaseLineData.rows = this.getLineDataKey(res.data.ab_project_count_trend.release)
          } else if (res.data.code == 401) {
            removeToken()
            removeName()
            this.$message.error('登陆超时或该账号已被登出，请您重新登录');
            this.$router.push({
              path: '/#/login'
            })
            return
          }
        }
      })
    }
  },
  watch: {
    chooseList: {
      handler: function() {
        if(this.chooseList.radio == 1) {
          this.getSummary()
        } else {
          this.getData()
          // this.getPoints()
          this.getTarget()
        }
      },
      deep: true
    },
    activeName(name) {
      this.$nextTick(() => {
        if(name) {
          if(!this.tableData.length) {
            this.periodDataEmpty = true
          } else {
            this.periodDataEmpty = false
          }
          this.$refs[`line${name}`].echarts.resize()
        }
      })
    },
    dialogTableVisible2(status) {
      this.$nextTick(() => {
        if(status) {
          if(this.$refs.filterTable) {
            this.$refs.filterTable.clearFilter()
          }
          if(this.$refs.filterTable1) {
            this.$refs.filterTable1.clearFilter()
          }
          if(this.$refs.filterTable2) {
            this.$refs.filterTable2.clearFilter()
          }

        }
      })


    }
  }
}
</script>

<style lang="scss">
  @import '../../assets/common/common.scss';

   /deep/ .is-hidden {
        visibility: visible !important;
     }
  #kpi{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
  }

  #cursor >>> .el-table--enable-row-transition .el-table__body td{
    cursor: pointer;
  }
  #dialog .el-dialog {
    width: 90%;
  }
  .pro_name {
    text-align: center;
    cursor: pointer;
  }
  .loader {
    float: right;
    margin-bottom: 20px;
  }
  .el-table tbody .cell-grey {
      background-color:#909399 !important;
      color: #fff;
  }
  .el-table tbody .cell-red {
      background-color:#ff4949 !important;
      color: #fff;
  }
  .el-table tbody .cell-yellow {
      background-color:#ffba00 !important;
      color: #fff;
  }
  .el-table tbody .cell-green {
      background-color:#13ce66 !important;
      color: #fff;
  }
  .kpiPageBtn{
    position: absolute;
    right: 30px;
    top: 18px;
    z-index: 10;
  }
  /deep/ .reach{
    color: rgb(46, 233, 8);
  }
  // /deep/ #cursor .el-table{
  //   color: green;
  // }
  /deep/ .noReach{
    color: #e4393c;
  }
  .border{
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
  }
  .primary{
      color: #409EFF;
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;
  }
  .marT{
      margin-top: 20px;
  }
  .marb{
    margin-bottom: 5px;
  }
  .bgColor{
      background: #fff;
  }
  .pad{
      padding: 18px 20px;
      border-bottom: 1px solid #e6ebf5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .mar{
    padding: 20px;
  }
  .wrapper{
    display: flex;
  }
  .wrapper-item{
    flex: 1;
    margin: auto;
  }
  .card-content{
    display: flex;
    width: 70%;
    margin: auto;
    padding: 3px 5px;
    flex-wrap: nowrap;
    color: #1682e6;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    background-color: #fff;
    overflow: hidden;
    transition: 0.3s;
    font-family: "Helvetica Neue";
    .left{
      flex: 1;
      margin: auto;
    }
    .right{
      flex: 1;
      margin: auto;
    }
  }



</style>
